{% extends "base.html" %}

{% load static %}
{% load component_tags %}

{% comment %} Meta tags {% endcomment %}
{% block meta_tags %}
<link rel="stylesheet" href="{% static 'css/base_terminal.css' %}">
<script  src="{% static 'js/ui.js' %}"></script>
<script  src="{% static 'js/communicate.js' %}"></script>
{% endblock %}
{% block content %}

<main class='h-100 d-flex flex-column align-items-stretch'>
    <div class="mb-2 d-flex flex-nowrap justify-content-start">
        <div id="tablist" class="order-0 flex-fill nav nav-tabs p-1 d-flex align-items-center justify-content-start" id="nav-tab" role="tablist">
          <button id="createTerminal" class="nav-link add d-flex align-items-center justify-content-center" type="button" role="tab" >
            <img src="{% static 'images/add.svg' %}" class="d-block" height="16px" width="16px" alt="New" />
          </button>
        </div>
        <div id="profile" class="order-1 dropdown text-end" style="  border-bottom: 1px solid var(--slate-500) !important;">
            <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="user_profile" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://api.dicebear.com/7.x/pixel-art/svg?seed={{user.username}}" alt="mdo" width="36" height="36" class="rounded-circle border-slate-700">
            </a>
            <ul class="dropdown-menu text-small dropdown-menu-dark" aria-labelledby="user_profile">
                <li>
                    <button class="dropdown-item" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" style="color: var(--slate-400)">
                        <img class="align-top px-1" src="{% static 'images/saved.svg' %}" />
                        My saved hosts
                    </button>
                </li>
                {% if user.is_staff or user.is_superuser %}
                <li>
                    <a class="dropdown-item" href="/admin" style="color: var(--slate-400)">
                        <img class="align-top px-1" src="{% static 'images/admin.svg' %}" />
                        Admin Panel
                    </a>
                </li>
                {% endif %}
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a class="dropdown-item" href="{% url 'logout' %}" style="color: var(--slate-400)">
                        <img class="align-top px-1" src="{% static 'images/logout.svg' %}" />
                        Sign out
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="tab-content flex-fill" id="tabpanel">

    </div>
</main>

<div class="context-menu">
    <div class="container" id="contextMenu" style="display:none">
        <div class="menu">
        </div>
    </div>
</div>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog show">
      <div class="modal-content bg-dark" style="min-height: 200px">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Sharing center</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body text-center d-flex justify-content-center align-content-center flex-column" id="sessionkey">
          Sharing key: <span id="sessionkey">...</span>
        </div>
        <div class="modal-footer text-center">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" id="shareSession" class="btn bg-sky-700" >Toggle Sharing</button>
        </div>
      </div>
    </div>
  </div>
  

<div class="offcanvas offcanvas-end bg-dark" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header text-center" style="color: var(--slate-400); background-color: var(--slate-600);">
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        <h5 id="offcanvasRightLabel" class="m-0">My Saved hosts</h5>
    </div>
    <div class="offcanvas-body">
        <form>
            <div class="input-group mb-3">
                <input type="text" id="search-accordion" class="form-control" style="background-color: #3d444a !important" placeholder="Session name/ip/hostname" aria-label="Session name/ip" aria-describedby="button-addon2" {% if not perms.terminal.USE_SSH %}disabled{% endif %}>
                <button class="btn btn-dark bg-sky-800" type="button" id="button-addon2">Auto Search</button>
            </div>
        </form>
        <div class="h-100 w-100 verflow-auto">
            <div class="accordion accordion-flush bg-dark" id="accordionFlush">
            </div>

            

            {% if not perms.terminal.USE_SSH %}
            <div class="text-center w-100 text-danger p-2">This account have locked access to saved session functionalities. Please contact app administrator to receive access to specific functionalities.</div>
            {% endif %}

            <hr />

            {% if perms.terminal.USE_SSH or perms.terminal.USE_NOTE %}
            <div class="text-center">
                Use the form below to join session:
                <div class="input-group my-3">
                    <input type="password" id="joinSessionInput" class="form-control" style="background-color: #3d444a !important" placeholder="Session key" aria-label="Session key" aria-describedby="button-addon4">
                    <button class="btn btn-dark bg-sky-700" id="joinSessionBtn" type="button" id="button-addon4">Join</button>
                </div>
            </div>
            {% endif %}
            

        </div>
    </div>
</div>




{% endblock %}